<!-- 首页九宫格 -->
<template>
	<view class="container" style="background: #f6f6f6;">
		<!-- 九宫格菜单列表 :style="{ height:scroll+'px' }"-->
		<HeaderTitle title="待办" rightTextColor="#1959F9" rightContent="发起审批" :backgroundColor="bgColor"
			:rightTextColor="bgColor" @selectRightIconChange="selectRightIconChange" :isBack="false" :isSearch="true"
			:isTab="true" :rangeSearchData="rangeSearchData" :isSelect="true" :inputValue="inputValue"
			:selectValue="selectValue" @changeSearchSelect="changeSearchSelect" :currentIndex="currentIndex"
			:tabsList="tabsList" @tabOnClickItem="onClickItem" @confirm="confirmsearch" @cancel="cancel" />

		<!-- tab切换区域 -->
		<view style="margin-top: 30rpx;">
			<!-- 我的代办 -->
			<HandleList v-if="currentIndex==0" ref="HandleList" :DetpId="childrenDeptId" :parentObj="{ ...this }" />
			<!-- 我发起的 -->
			<MyInitiatedList v-if="currentIndex==1" ref="MyInitiatedList" :DetpId="childrenDeptId" />
			<!-- 我经办的  -->
			<MyHandlingList v-if="currentIndex==2" ref="MyHandlingList" :DetpId="childrenDeptId" />
		</view>

		<!-- 顶部弹出层 -->
		<u-popup class="popup" v-model="showTop" mode="top" :mask='false' border-radius="14">
			<view class="uni-shop-pop">
				<!--display: inline-block; -->
				<text style="margin-bottom: 20rpx; padding: 60rpx 20rpx 20rpx 20rpx;">发起审批</text>
				<view class="uni-pop-item" style="margin-top: 20rpx;">
					<view v-for="(item, index) in ProcessInitiationList" :key="item.Id" class="uni-pop-img-text"
						style="margin-left: 20rpx;" @click="urlPagesChange(item.url, item)">
						<text>{{item.Name}}</text>
						<uni-tag :text="'版本'+item.Version" type="primary" size="small" style="margin-left: 20rpx;" />

					</view>
				</view>
			</view>
		</u-popup>
		<!-- 自定义底部导航栏组件 -->
		<pyh-tab></pyh-tab>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		Ai_TemplateGetDataList
	} from '@/api/interface.js'

	// 引入顶部navbar组件
	import HeaderTitle from '@/components/header/header-title.vue'
	// 引用我发起的， 我的代办  我经办的
	import MyInitiatedList from '../Approval/TabList/MyInitiatedList.vue'
	// 我的代办
	import HandleList from '../Approval/TabList/HandleList.vue'
	// 我经办的
	import MyHandlingList from '../Approval/TabList/MyHandlingList.vue'
	export default {
		components: {
			// 公共头部组件
			HeaderTitle,
			// 我发起的
			MyInitiatedList,
			// 我的代办
			HandleList,
			// 我经办的
			MyHandlingList
		},
		data() {
			return {
				// 搜索默认placehoder
				placeholder: "",
				// 顶部搜索类型关键词
				inputValue: "",
				selectValue: "", //绑定的condition类型
				// 下拉搜索条件
				rangeSearchData: [{
						value: 'Name',
						text: "流程名称"
					},
					{
						value: 'ReferenceNo',
						text: "单号"
					},
					{
						value: 'CreatedUserRealName',
						text: "发起人"
					},
					{
						value: 'StateText',
						text: "流程状态"
					},
				],
				// 是否展示顶部弹出层
				showTop: false,
				styleType: 'text', //显示text
				// 标签栏点击的是我的样品还是反馈
				currentIndex: 0,
				tabsList: ['我的待办', '我发起的', '我的经办'],
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '轻轻上拉',
					contentrefresh: '努力加载中...',
					contentnomore: '实在没有了'
				},
				pagination: {
					current: 1,
					pageSize: 10,
				},
				// 列表传递参数
				queryParams: {
					Conditions: [{
						condition: "DRKeyWord",
						Keyword: ""
					}]
				},
				// 公司id  负责传递子组件
				childrenDeptId: "",
				// 流程管理列表
				ProcessInitiationList: [],
			};
		},
		//下拉刷新
		onPullDownRefresh() {

			var that = this
			if (this.currentIndex == 0) {
				setTimeout(function() {
					that.$refs.HandleList.openForm()
				}, 100)
			} else if (this.currentIndex == 1) {
				setTimeout(function() {
					that.$refs.MyInitiatedList.openForm()
				}, 100)
			} else {
				setTimeout(function() {
					that.$refs.MyHandlingList.openForm()
				}, 100)
			}
			console.log('下拉刷新了', this.currentIndex)
			uni.stopPullDownRefresh();
		},
		//上拉加载
		onReachBottom() {
			var that = this
			this.pagination.current += 1
			if (this.currentIndex == 0) {
				setTimeout(function() {
					if (that.$refs.HandleList.list.length >= that.$refs.HandleList.Total) {
						return
					}
					that.$refs.HandleList.getReachBottom(that.pagination.current)
				}, 100)
			} else if (this.currentIndex == 1) {
				setTimeout(function() {
					console.log('上拉加载了了', that.currentIndex, that.$refs.MyInitiatedList, that.pagination.current)
					if (that.$refs.MyInitiatedList.list.length >= that.$refs.MyInitiatedList.Total) {
						return
					}
					that.$refs.MyInitiatedList.getReachBottom(that.pagination.current)
				}, 100)
			} else {
				setTimeout(function() {
					if (that.$refs.MyHandlingList.list.length >= that.$refs.MyHandlingList.Total) {
						return
					}
					that.$refs.MyHandlingList.getReachBottom(that.pagination.current)
				}, 100)
			}


		},
		onLoad() {
			// 如果有登录过直接跳转首页
			let UserInfo = uni.getStorageSync('UserInfo')
			if (UserInfo) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
			// 判断用户是否有登录过，如果有登录过 直接登录  否则 跳转登录页面
			let userName = uni.getStorageSync('userName')
			let password = uni.getStorageSync('password')
			if (userName && password) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
			this.childrenDeptId = this.DeptId
			this.getRefreshListData()
			this.$forceUpdate()
		},
		onShow() {
			// 存储用户相关信息
			// this.$store.dispatch('getUserInfoId')
			// let UserInfo = uni.getStorageSync('UserInfo')
			// let RealName = uni.getStorageSync('RealName')
			// let Permissions = uni.getStorageSync('Permissions')
			// let DeptId = uni.getStorageSync('DeptId')
			// if (UserInfo) {
			// 	this.$store.commit("setUserInfo", {
			// 		UserInfo: UserInfo
			// 	})
			// }
			// 判断用户是否有登录过，如果有登录过 直接登录  否则 跳转登录页面
			let userName = uni.getStorageSync('userName')
			let password = uni.getStorageSync('password')
			if (userName && password) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
			this.childrenDeptId = this.DeptId
			this.getRefreshListData()
			this.$forceUpdate()
			// 隐藏默认底部导航栏
			// uni.hideTabBar()
			// 2.通过dispatch触发一个actions  储存vuex里的用户id
			// this.$store.dispatch("getUserInfoId",{url:"/Base_Manage/Home/GetOperatorInfo"})
		},
		computed: {
			...mapState(["UserInfo", "DeptId", "bgColor"]),
		},
		methods: {
			// 搜索下拉选择回调
			changeSearchSelect(event) {
				this.selectValue = event
				// this.queryParams.Conditions[0].condition = event
				// // 处理动态placeholder
				// let placeHolderText = this.rangeSearchData.filter(item => item.value === event)[0].text
				// this.placeholder = '请输入' + placeHolderText
				console.log('搜索左侧下拉类型-------------------', event, this.inputValue)
			},
			// 刷新列表
			getRefreshListData() {
				var that = this
				console.log('是否刷新列表了' + this.currentIndex)
				if (this.currentIndex == 0) {
					//******************************** 注意此处调用子组件需要加延迟 ，否则首次登录APP后 进来不生效 没有调用接口 不刷新页面*********************************
					setTimeout(function() {
						that.$refs.HandleList.openForm()
					}, 100)
				} else if (this.currentIndex == 1) {
					//******************************** 注意此处调用子组件需要加延迟 ，否则首次登录APP后 进来不生效 没有调用接口 不刷新页面*********************************
					setTimeout(function() {
						this.$refs.MyInitiatedList.openForm()
					}, 100)
				} else {
					//******************************** 注意此处调用子组件需要加延迟 ，否则首次登录APP后 进来不生效 没有调用接口 不刷新页面*********************************
					setTimeout(function() {
						this.$refs.MyHandlingList.openForm()
					}, 100)
				}
			},
			// 搜索确认
			confirmsearch(value) {
				console.log('搜索确认了', value, this.selectValue)
				// if (this.selectValue === 'Name') {
				// 	this.placeholder = '请输入流程名称'
				// } else if (this.selectValue === 'ReferenceNo') {
				// 	this.placeholder = '请输入单号'
				// } else if (this.selectValue === 'CreatedUserRealName') {
				// 	this.placeholder = '请输入发起人'
				// } else {
				// 	this.placeholder = '请输入流程状态'
				// }
				if (this.currentIndex == 0) {
					this.$refs.HandleList.queryParam.condition = this.selectValue
					this.$refs.HandleList.queryParam.keyword = value
					this.$refs.HandleList.openForm()
				} else if (this.currentIndex == 1) {
					this.$refs.MyInitiatedList.queryParam.condition = this.selectValue
					this.$refs.MyInitiatedList.queryParam.keyword = value
					this.$refs.MyInitiatedList.openForm()
				} else {
					this.$refs.MyHandlingList.queryParam.condition = this.selectValue
					this.$refs.MyHandlingList.queryParam.keyword = value
					this.$refs.MyHandlingList.openForm()
				}
			},
			// 搜索取消按钮
			cancel() {
				console.log('搜索取消按钮')
				if (this.currentIndex == 0) {
					this.$refs.HandleList.queryParam.condition = ""
					this.$refs.HandleList.queryParam.keyword = ""
					this.$refs.HandleList.openForm()
				} else if (this.currentIndex == 1) {
					this.$refs.MyInitiatedList.queryParam.condition = ""
					this.$refs.MyInitiatedList.queryParam.keyword = ""
					this.$refs.MyInitiatedList.openForm()
				} else {
					this.$refs.MyHandlingList.queryParam.condition = ""
					this.$refs.MyHandlingList.queryParam.keyword = ""
					this.$refs.MyHandlingList.openForm()
				}
			},

			// 右侧按钮点击
			selectRightIconChange() {
				console.log('右侧按钮点击了')
				// 获取流程管理列表
				this.getAi_TemplateGetDataList()

			},
			// 获取流程管理列表
			getAi_TemplateGetDataList() {
				var that = this
				uni.showLoading({
					title: '加载中'
				})
				Ai_TemplateGetDataList({}).then(resJson => {
					if (resJson.Success) {
						uni.hideLoading()
						resJson.Data.forEach(item => {
							if (item.Name === '日常报销单') {
								item.src = "../../assets/daily.png"
								item.url = "/pages/Approval/DailyFormAdd"
							} else if (item.Name === '差旅费报销单') {
								item.src = "../../assets/travel.png"
								item.url = '/pages/Approval/TravelFormAdd'
							} else if (item.Name === '工资审批流') {
								item.src = "../../assets/salary.png"
								item.url = '/pages/Approval/SalaryApprovalProcessForm'
							} else {
								item.src = "../../assets/slaryApproval.png"
								item.url = '/pages/Approval/SalaryRosterApprovalForm'
							}
						})
						this.ProcessInitiationList = resJson.Data
						setTimeout(function() {
							// 弹起顶部弹窗
							that.showTop = true
						}, 300)
					} else {
						uni.hideLoading()
						this.$errorToast(resJson.Msg)
					}
				})
			},
			// tab切换
			// 我的发起导航栏点击事件
			onClickItem(e) {
				var that = this
				this.currentIndex = e
				console.log('tab切换了', e)
				if (this.currentIndex == 0) {

				} else if (this.currentIndex == 1) {
					// 我发起的
					// 注意**********************88必须加延迟  否则获取不到子组件的refs**********************************************88
					setTimeout(function() {
						console.log('that.$refsMyInitiatedList', that.$refs.MyInitiatedList)
						that.$refs.MyInitiatedList.openForm()
					}, 100)

				} else {
					// 我经办的
					// 注意**********************88必须加延迟  否则获取不到子组件的refs**********************************************88
					setTimeout(function() {
						console.log('that.$refsMyInitiatedList', that.$refs.MyInitiatedList)
						that.$refs.MyHandlingList.openForm()
					}, 100)

				}
			},
			// 跳转审批流页面
			urlPagesChange(url, item) {
				console.log('跳转审批页面了', url, item)
				// 隐藏顶部弹窗
				this.showTop = false
				uni.navigateTo({
					url: item.url + '?TemplateId=' + item.Id + '&title=新增'
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	// 覆盖uview弹窗的背景  注意必须用::v-deep深度修改  不饿能用v-deep  不生效*************************************
	::v-deep.u-drawer-top {
		background-color: rgba(0, 0, 0, 0.7) !important;
	}

	.container {

		// 弹窗区域
		.uni-shop-pop {
			// background-color: #464646;
			padding-top: 100rpx;

			text {

				&:first-child {
					font-size: 34rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
			}

			.uni-pop-item {
				display: flex;
				flex-wrap: wrap;

				.uni-pop-img-text {
					width: 45%;
					text-align: center;
					padding: 20rpx 0;
					color: #fff;
					margin-bottom: 18rpx;
					background: rgba(0, 0, 0, 0.8);
					border-radius: 10rpx;

					image {
						width: 55rpx;
						height: 55rpx;
					}

					text {
						font-size: 24rpx;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 40rpx;
					}
				}
			}
		}
	}

	.sudoku_row {
		display: flex;
		align-items: center;
		height: 100%;
		// background: url("../../assets/homeback.jpg") no-repeat;
		background-size: cover;
		justify-content: center;
		padding-left: 20rpx;
		padding-right: 20rpx;

		::v-deep.u-border-left {}

		::v-deep.u-grid {
			display: flex !important;
			justify-content: space-between !important;

			.u-grid-item {
				width: 230rpx !important;
				margin-bottom: 20px;
				// border: 1px solid #B2CBD5;
			}
		}

		.item {
			margin-bottom: 20px;
		}

		//   待后续兼容
	}

	.sudoku_item {
		// background-color: #fff !important;
		border-radius: 5px;
		font-weight: bold;
		width: 160rpx;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.opacity {
		opacity: 0.4;
		background: #e5e5e5;
	}

	.sudoku_item img {
		margin-bottom: 3px;
		display: block;
	}
</style>